<template>
  <el-main>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item>
        公寓名称
        <el-input v-model="ruleForm.flagName" style="width: 15%;margin-right: 50px"></el-input>
        楼盘名称
        <el-input v-model="ruleForm.premisesName" style="width: 15%;margin-right: 50px"></el-input>
        <el-button type="warning">添加楼盘</el-button>
      </el-form-item>


      <el-form-item>
        <span>装修情况</span>
        <el-select v-model="ruleForm.decorate" style="width: 6%;">
          <el-option label="精装" value="0"></el-option>
          <el-option label="简装" value="1"></el-option>
          <el-option label="毛坯" value="2"></el-option>
        </el-select>
        <span style="margin-left: 10%">设置管家</span>
        <el-select v-model="ruleForm.manager">
          <el-option v-for="item in stewards" :label="item.username" :value="item.userId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        付款方式:押
        <el-select v-model="ruleForm.paymentMortgage" style="width: 6%">
          <el-option v-for="item in this.ids" :value="item"></el-option>
        </el-select>
        付
        <el-select v-model="ruleForm.paymentPay" style="width: 6%">
          <el-option v-for="item in this.ids" :value="item"></el-option>
        </el-select>
        <span style="margin-left: 10%">户型</span>
        <el-select v-model="ruleForm.room" style="width: 6%">
          <el-option v-for="item in this.ids" :value="item"></el-option>
        </el-select>
        室
        <el-select v-model="ruleForm.hall" style="width: 6%">
          <el-option v-for="item in this.ids" :value="item"></el-option>
        </el-select>
        厅
      </el-form-item>
      <el-form-item>
        公共配套
        <el-checkbox-group v-model="publicIds">
          <el-checkbox v-for="item in publicFacilitys" :label="item.id" :value="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        公共区域照片
        <el-upload
          class="avatar-uploader"
          action="http://localhost:9300/qiniu/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <img width="50px" height="50px" v-if="ruleForm.housePicture" :src="ruleForm.housePicture" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        房源介绍<textarea v-model="ruleForm.introduce" style="width: 1000px;height: 80px"></textarea>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addRoom">添加房型</el-button>
      </el-form-item>
      <el-form-item style="margin-left: 30%;">
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="房型名称">
          <el-input v-model="form.acreage"></el-input>
        </el-form-item>
        <el-form-item label="面积">
          <el-input v-model="form.proportion" style="width: 90%"></el-input>平方米
        </el-form-item>
        <el-form-item label="朝向">
          <el-select v-model="form.direction">
            <el-option value="1" label="东"></el-option>
            <el-option value="2" label="南"></el-option>
            <el-option value="3" label="西"></el-option>
            <el-option value="4" label="北"></el-option>
            <el-option value="4" label="东南"></el-option>
            <el-option value="4" label="东北"></el-option>
            <el-option value="4" label="西南"></el-option>
            <el-option value="4" label="西北"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="独立配套">
          <el-checkbox-group v-model="privateIds">
            <el-checkbox v-for="item in privateFacilitys" :label="item.id" :value="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="租金">
          <el-input v-model="form.rental" style="width: 90%;"></el-input>元/月
        </el-form-item>
        <el-form-item label="房间区域">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9300/qiniu/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess2">
            <img width="50px" height="50px" v-if="form.roomPicture" :src="form.roomPicture" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addHouse">确认保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-main>
</template>

<script>
  import {getPrivateFacility,getPublicFacility,getSteward,saveFocus} from '@/api/house/room/info'

  export default {
    name: "Info",
    data() {
      return {
        privateFacilitys:[],
        publicFacilitys:[],
        stewards:[],
        dialogVisible:false,
        privateIds:[],
        publicIds:[],
        ids: [1, 2, 3, 4, 5],
        form:{roomPicture:''},
        ruleForm: {
          housePicture: '',
          roomPicture: '',
        },
        rules: {
          name: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      addHouse() {
        this.ruleForm.roomName = this.form.roomName;
        this.ruleForm.proportion = this.form.proportion;
        this.ruleForm.direction = this.form.direction;
        this.ruleForm.privateIds = this.privateIds;
        this.ruleForm.rental = this.form.rental;
        this.ruleForm.roomPicture = this.form.roomPicture;
        this.dialogVisible=false;
      },
      submitForm() {
        if(this.ruleForm.premisesName==null){
          alert("请选择楼盘名称")
        }else {
          this.ruleForm.publicIds = this.publicIds;
          this.ruleForm.privateIds = this.privateIds;
          this.ruleForm.type=1;
          saveFocus(this.ruleForm).then(res => {
            if(res.code==500){
              this.$message.error(res.msg);
            }else {
              this.$message.success("添加成功")
              window.location.href="http://localhost/house/room"
            }
          })
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      addRoom() {
        this.dialogVisible=true;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleAvatarSuccess(res) {
        this.ruleForm.housePicture = res;
      },
      handleAvatarSuccess2(res) {
        this.form.roomPicture = res;
      },
      getPrivateFacility() {
        getPrivateFacility().then(res=>{
          this.privateFacilitys=res.data;
        })
      },
      getPublicFacility() {
        getPublicFacility().then(res=>{
          this.publicFacilitys=res.data;
        })
      },
      getSteward() {
        getSteward().then(res=>{
          this.stewards=res.data;
        })
      }
    },
    created() {
      this.getPrivateFacility();
      this.getPublicFacility();
      this.getSteward();
    }
  }
</script>

<style scoped>

</style>
